<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 去除所有标签的内外间距 */
        *{
            padding: 0;  
            margin: 0;
        }
        #box{
            position: relative;
            width: 350px;
            height: 500px;
            margin: 0 auto;  /*左右外间距为auto 使其居中*/
            background: url(img/bg.jpg);
            background-size: auto 100%;
            overflow: hidden;
        }
        #title{
            position: absolute;
            top: 30%;
            left: 16%;
        }
        #title-bird{
            position: absolute;
            right: 0;
            top: 20px;
        }
        #start {
            position: absolute;
            left: 50%;
            margin-left: -42px;
            bottom: 180px;
        }
        #bird{
            display: none;
            position: absolute;
            left: 30px;
            top: 30px;
        }
        .pipe{
            position: absolute;
            width: 63px;
            height: 100%;
        }
        .down-pipe{
            position: absolute;
            bottom: 0;
            
            background-image: url(img/down_mod.png);
        }
        .up-pipe{
            position: relative;
            background-image: url(img/up_mod.png);
        }
        .up-pipe img{
            position: absolute;
            bottom: 0;
        }
        #over{
            display: none;
            position: absolute;
            top: 50%;
            margin-top: -20px;
            left: 50%;
            margin-left: -110px;
            z-index: 1;
        }
        #score{
            position: absolute;
        }

    </style>
</head>
<body>
    <h1 id="score">0</h1>
    <div id="box">
        <!-- 标题 -->
        <div id="title">
            <img src="img/head.jpg">
            <img id="title-bird" src="img/bird0.png">
        </div>
        <!-- 开始按钮 -->
        <img id="start" src="img/start.jpg">
        <!-- 小鸟 -->
        <img id="bird" src="img/down_bird1.png">
        <img id="over" src="img/game_over.jpg">
        <!-- 柱子 -->
       
    </div>
    <script>


        // 假设上方的高度最小是100，最大是300
        // Math.random() 0-1
        var min = 50
        var max = 350
        var birdTimer = null
        var pipeTimer = null
        var gap = 100
        var pipeMoveTimer = []  

        

        //  Math.random()*(max-min)+min   生成一个 min-max的随机数
        start.onclick = function () {
            title.style.display = 'none'  /*把标题隐藏*/
            start.style.display = 'none'  /*把开始按钮隐藏*/
            bird.style.display  = 'block'  /*将隐藏的小鸟显示*/
            
            // 小鸟的操作
            var speed = 0  // 小鸟掉的速度  speed 是正数 说明往下飞，是负数 往上飞
            // bird.offsetTop  指的是小鸟距离浏览器上方的间距
            birdTimer = setInterval(function(){
                speed += 1
                box.onclick = function () {
                    speed = -10
                }
                speed > 0 ? bird.src = 'img/down_bird1.png' :  bird.src = 'img/up_bird1.png'
                
                // if (speed >0) {
                //     bird.src = 'img/down_bird1.png'
                // }else{
                //     bird.src = 'img/up_bird1.png'
                // }
                

                bird.offsetTop + speed <= 0 ? bird.style.top = '0px' : bird.style.top = bird.offsetTop + speed + 'px'
                
                
                if (bird.offsetTop >= 450) {
                    // 执行end函数  清除小鸟的移动和柱子的移动
                    clearInterval(birdTimer)
                    clearInterval(pipeTimer) 
                    
                    // 循环数组  item 就是数组中的每一个数据     将对数据的操作写在{}
                    // pipeMoveTimer.forEach(function(item){})
                    pipeMoveTimer.forEach(function(item){
                        clearInterval(item)
                    })
                    over.style.display = 'block'
                }

                // 撞上柱子了  就要游戏结束

                // 获取到所有的柱子  因为有很多的柱子 所以获取到的是数组  要对数组中的每一个数据进行是否碰撞的判断
                var pipes = document.getElementsByClassName('nopass-pipe')
                
                // item 就是每一根柱子
                // pipes.length>0 && pipes.forEach(function(item){
                //     // 在当前的柱子里  获取上半部分
                //     var up = item.querySeletor('.up-pipe')
                //     if (item.offsetLeft <= bird.offsetLeft + bird.offsetWidth) {
                //         var result = bird.offsetTop < up.offsetHeight || bird.offsetTop > up.offsetHeight + 100 - bird.offsetHeight
                //         if (result == true) {
                //             console.log('撞了')
                //         }else{
                //             console.log('没撞')
                //         }
                //     }
                // })

                

                if (pipes.length>0) {
                    for (let i=0;i<pipes.length;i++) {
                        var up = pipes[i].getElementsByClassName('up-pipe')[0]
                        if (pipes[i].offsetLeft <= bird.offsetLeft + bird.offsetWidth) {
                            var result = bird.offsetTop < up.offsetHeight || bird.offsetTop > up.offsetHeight + gap - bird.offsetHeight
                            if (result == true) {
                                clearInterval(birdTimer)
                                clearInterval(pipeTimer) 
                                
                                // 循环数组  item 就是数组中的每一个数据     将对数据的操作写在{}
                                // pipeMoveTimer.forEach(function(item){})
                                pipeMoveTimer.forEach(function(item){
                                    clearInterval(item)
                                })
                                over.style.display = 'block'
                            }
                        }
                    }   
                }
            },50)
            

            
            // 柱子的移动和生成
            pipeTimer = setInterval(function(){   // 每隔 3s 生成一个柱子
                var l = 500
                var pipe = document.createElement('div')  // 生成的新柱子
                pipe.style.left = l + "px"
                pipe.classList.add('pipe')  // 给div添加一个pipeclass
                pipe.classList.add('nopass-pipe')  // 给div添加一个pipeclass
                // `` 是字符串格式的数据 里面可以换行和放置变量   ${} 里面放置变量
                var upH =  Math.random()*(max-min)+min
                var downH = 500 - upH - gap
                pipe.innerHTML = `
                    <div class="up-pipe" style="height: ${upH}px">
                        <img src="img/up_pipe.png">
                    </div>
                    <div class="down-pipe" style="height: ${downH}px">
                        <img src="img/down_pipe.png">
                    </div>
                `
                box.appendChild(pipe)
                var x = setInterval(function () {
                    l -= 3
                    pipe.style.left = l + 'px'
                    if (pipe.offsetLeft <= 0-pipe.offsetWidth) {
                        clearInterval(x)
                        score.innerHTML = score.innerHTML - 0 + 1
                        pipe.style.display = 'none'

                    }
                    // 说明通过这根柱子
                    if (pipe.offsetWidth + pipe.offsetLeft <= bird.offsetLeft) {
                        pipe.classList.remove('nopass-pipe')
                    }
                }, 30)
                pipeMoveTimer.push(x)
            },2500)
        
        
        }


        

    </script>
</body>
</html>